<template>
  <div class="app-container">
    <!-- 工艺管理数据 -->
    <el-row>
      <el-col :span="24" class="card-box">
        <el-card>
          <el-form
            :model="p_queryParams"
            ref="p_queryForm"
            :inline="true"
            label-width="68px"
          >
            <el-form-item label="工艺名称" prop="techProcessName">
              <el-input
                v-model="p_queryParams.techProcessName"
                placeholder="请输入工艺名称"
                clearable
                size="small"
                @keyup.enter.native="handlePQuery"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="cyan"
                icon="el-icon-search"
                size="mini"
                @click="handlePQuery"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>

          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                type="primary"
                icon="el-icon-plus"
                size="mini"
                @click="handlePAdd"
                v-hasPermi="['production:techProcess:add']"
                >新增</el-button
              >
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="success"
                icon="el-icon-edit"
                size="mini"
                :disabled="p_single"
                @click="handlePUpdate"
                v-hasPermi="['production:techProcess:edit']"
                >修改</el-button
              >
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                :disabled="p_multiple"
                @click="handleTPDelete"
                v-hasPermi="['production:techProcess:remove']"
                >删除</el-button
              >
            </el-col>

            <right-toolbar
              :showSearch.sync="showSearch"
              @queryTable="getTPList"
            ></right-toolbar>
          </el-row>

          <el-table
            ref="singleTable"
            border
            highlight-current-row
            v-loading="loading"
            :data="techProcessList"
            @row-click="handleTechProcessSelectionChange"
          >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column
              label="工艺编号"
              align="center"
              prop="techProcessNo"
            />
            <el-table-column
              label="工艺名称"
              align="center"
              prop="techProcessName"
            />
            <el-table-column
              label="工艺描述"
              align="center"
              prop="techProcessDesc"
            />
            <el-table-column
              label="是否有效"
              align="center"
              prop="deleteFlag"
              :formatter="deleteFlagFormat"
            />
            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handlePUpdate(scope.row)"
                  v-hasPermi="['production:techProcess:edit']"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleTPDelete(scope.row)"
                  v-hasPermi="['production:techProcess:remove']"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="totalTP > 0"
            :total="totalTP"
            :page.sync="p_queryParams.pageNum"
            :limit.sync="p_queryParams.pageSize"
            @pagination="getTPList"
          />
          <div style="margin: 20px">
            <label for="">当前选中的工艺:{{ chosenTechProcessNo }}</label>
          </div>
        </el-card>
      </el-col>
      <el-col :span="24" class="card-box">
        <el-card>
          <el-form
            :model="queryParams"
            ref="queryForm"
            :inline="true"
            v-show="showSearch"
            label-width="100px"
          >
            <el-form-item label="工艺流程编号" prop="techProcedureNo">
              <el-input
                v-model="queryParams.techProcedureNo"
                placeholder="请输入工艺流程编号"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="工艺流程名称" prop="techProcedureName">
              <el-input
                v-model="queryParams.techProcedureName"
                placeholder="请输入工艺流程名称"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <!-- <el-form-item label="工艺编号" prop="techProcessNo">
              <el-input
                v-model="queryParams.techProcessNo"
                placeholder="请输入工艺编号"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item> -->
            <el-form-item>
              <el-button
                type="cyan"
                icon="el-icon-search"
                size="mini"
                @click="handleQuery"
                >搜索</el-button
              >
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
                >重置</el-button
              >
            </el-form-item>
          </el-form>

          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                type="primary"
                icon="el-icon-plus"
                size="mini"
                @click="handleAdd"
                v-hasPermi="['production:techProcedure:add']"
                >新增</el-button
              >
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="success"
                icon="el-icon-edit"
                size="mini"
                :disabled="single"
                @click="handleUpdate"
                v-hasPermi="['production:techProcedure:edit']"
                >修改</el-button
              >
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                :disabled="multiple"
                @click="handleDelete"
                v-hasPermi="['production:techProcedure:remove']"
                >删除</el-button
              >
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="warning"
                icon="el-icon-download"
                size="mini"
                @click="handleExport"
                v-hasPermi="['production:techProcedure:export']"
                >导出</el-button
              >
            </el-col>
            <right-toolbar
              :showSearch.sync="showSearch"
              @queryTable="getList"
            ></right-toolbar>
          </el-row>

          <el-table
            v-loading="loading"
            :data="techProcedureList"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column
              label="工艺流程编号"
              align="center"
              prop="techProcedureNo"
            />
            <el-table-column
              label="工艺流程名称"
              align="center"
              prop="techProcedureName"
            />
            <el-table-column
              label="工艺编号"
              align="center"
              prop="techProcessNo"
            />
            <el-table-column
              label="当前工序 "
              align="center"
              prop="currentProcessName"
            />
            <el-table-column
              label="下工序 "
              align="center"
              prop="nextProcessName"
            />
            <el-table-column
              label="是否有效"
              align="center"
              prop="deleteFlag"
              :formatter="deleteFlagFormat"
            />
            <el-table-column label="创建者" align="center" prop="createBy" />
            <el-table-column
              label="创建时间"
              align="center"
              prop="createTime"
              width="180"
            >
              <template slot-scope="scope">
                <span>{{
                  parseTime(scope.row.createTime, "{y}-{m}-{d}")
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="更新者" align="center" prop="updateBy" />
            <el-table-column
              label="更新时间"
              align="center"
              prop="updateTime"
              width="180"
            >
              <template slot-scope="scope">
                <span>{{
                  parseTime(scope.row.updateTime, "{y}-{m}-{d}")
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleUpdate(scope.row)"
                  v-hasPermi="['production:techProcedure:edit']"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)"
                  v-hasPermi="['production:techProcedure:remove']"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </el-card>
      </el-col>
    </el-row>
    <!-- 添加或修改工艺管理对话框 -->
    <el-dialog
      :title="titleProcess"
      :visible.sync="openProcess"
      width="500px"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form
        ref="processForm"
        :model="processForm"
        :rules="rulesTP"
        label-width="80px"
      >
        <el-form-item label="工艺编号" prop="techProcessNo">
          <el-input
            v-model="processForm.techProcessNo"
            placeholder="请输入工艺编号"
          />
        </el-form-item>
        <el-form-item label="工艺名称" prop="techProcessName">
          <el-input
            v-model="processForm.techProcessName"
            placeholder="请输入工艺名称"
          />
        </el-form-item>
        <el-form-item label="工艺描述" prop="techProcessDesc">
          <el-input
            v-model="processForm.techProcessDesc"
            type="textarea"
            placeholder="请输入内容"
          />
        </el-form-item>
        <el-form-item label="是否有效">
          <el-radio-group v-model="processForm.deleteFlag">
            <el-radio
              v-for="dict in deleteFlagOptions"
              :key="dict.dictValue"
              :label="dict.dictValue"
              >{{ dict.dictLabel }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitTPForm">确 定</el-button>
        <el-button @click="cancelTP">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改工艺流程管理对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="工艺编号" prop="techProcessNo" v-bind:disabled="true">
          <el-input v-model="form.techProcessNo" placeholder="请输入工艺编号" />
        </el-form-item>
        <el-form-item label="工艺流程编号" prop="techProcedureNo">
          <el-input
            v-model="form.techProcedureNo"
            placeholder="请输入工艺流程编号"
          />
        </el-form-item>
        <el-form-item label="工艺流程名称" prop="techProcedureName">
          <el-input
            v-model="form.techProcedureName"
            placeholder="请输入工艺流程名称"
          />
        </el-form-item>
        
        <el-form-item label="当前工序 " prop="currentProcessNo">
          <el-select
            v-model="form.currentProcessNo"
            placeholder="请选择当前工序 "
          >
            <el-option 
            v-for="item in processOptions"
            :key="item.processNo"
            :label="item.processName"
            :value="item.processNo" />
          </el-select>
        </el-form-item>
        <el-form-item label="下工序 " prop="nextProcessNo">
          <el-select v-model="form.nextProcessNo" placeholder="请选择下工序 ">
            <el-option 
            v-for="item in processOptions"
            :key="item.processNo"
            :label="item.processName"
            :value="item.processNo" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否有效">
          <el-radio-group v-model="form.deleteFlag">
            <el-radio
              v-for="dict in deleteFlagOptions"
              :key="dict.dictValue"
              :label="dict.dictValue"
              >{{ dict.dictLabel }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listTechProcess,
  getTechProcess,
  delTechProcess,
  addTechProcess,
  updateTechProcess,
  exportTechProcess
} from "@/api/production/techProcess";

import {
  listTechProcedure,
  getTechProcedure,
  delTechProcedure,
  addTechProcedure,
  updateTechProcedure,
  exportTechProcedure
} from "@/api/production/techProcedure";

import {
  listProcess
} from "@/api/systembasic/process";

export default {
  name: "TechProcess",
  components: {},
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      p_ids: [],
      // 非单个禁用
      p_single: true,
      // 非多个禁用
      p_multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      totalTP: 0,
      // 工艺流程管理表格数据
      techProcessList: [],
      // 弹出层标题
      titleProcess: "",
      chosenTechProcessNo: "",
      // 是否显示弹出层
      openProcess: false,
      // 是否有效字典
      deleteFlagOptions: [],
      //工序列表
      processOptions:[],
      // 查询参数
      p_queryParams: {
        pageNum: 1,
        pageSize: 10,
        techProcessNo: null,
        techProcessName: null
      },
      // 表单参数
      processForm: {},
      // 表单校验
      rulesTP: {
        techProcessNo: [
          { required: true, message: "工艺编号不能为空", trigger: "blur" }
        ]
      },
      //=========================================================================================================
      // 工艺流程变量
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 工艺流程管理表格数据
      techProcedureList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        techProcedureNo: null,
        techProcedureName: null,
        techProcessNo: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        techProcedureNo: [
          { required: true, message: "工艺流程编号不能为空", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.getTPList();
    this.getProcesses();
    this.getDicts("sys_yes_no").then(response => {
      this.deleteFlagOptions = response.data;
    });
    
  },
  methods: {
    /** 查询工艺流程管理列表 */
    getTPList() {
      this.loading = true;
      listTechProcess(this.p_queryParams).then(response => {
        this.techProcessList = response.rows;
        this.totalTP = response.total;
        if(this.techProcessList.length>0 && this.chosenTechProcessNo==""){
          this.chosenTechProcessNo=this.techProcessList[0].techProcessNo;
          this.queryParams.techProcessNo=this.chosenTechProcessNo;
        }
        this.getList();
        this.loading = false;
      });
    },
    getProcesses(){
      listProcess().then(response => {
        this.processOptions = response.rows;
      });
    },
    // 是否有效字典翻译
    deleteFlagFormat(row, column) {
      return this.selectDictLabel(this.deleteFlagOptions, row.deleteFlag);
    },
    // 取消按钮
    cancelTP() {
      this.openProcess = false;
      this.resetTP();
    },
    // 表单重置
    resetTP() {
      this.processForm = {
        rowId: null,
        techProcessNo: null,
        techProcessName: null,
        techProcessDesc: null,
        deleteFlag: "Y",
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      this.resetForm("processForm");
    },
    /** 搜索按钮操作 */
    handlePQuery() {
      this.p_queryParams.pageNum = 1;
      this.getTPList();
    },
    /** 重置按钮操作 */
    resetTPQuery() {
      this.resetForm("p_queryForm");
      this.handlePQuery();
    },
    // 选择工艺
    handleTechProcessSelectionChange(selection) {
      this.chosenTechProcessNo = selection.techProcessNo;
      this.queryParams.techProcessNo = this.chosenTechProcessNo;
      this.form.techProcessNo = this.chosenTechProcessNo;
      this.getList();
    },
    /** 新增按钮操作 */
    handlePAdd() {
      this.resetTP();
      this.openProcess = true;
      this.titleProcess = "添加工艺流程管理";
    },
    /** 修改按钮操作 */
    handlePUpdate(row) {
      this.resetTP();
      const techProcessNo = row.techProcessNo || this.p_ids;
      getTechProcess(techProcessNo).then(response => {
        this.processForm = response.data;
        this.openProcess = true;
        this.titleProcess = "修改工艺流程管理";
      });
    },
    /** 提交按钮 */
    submitTPForm() {
      this.$refs["processForm"].validate(valid => {
        if (valid) {
          if (this.processForm.rowId != null) {
            updateTechProcess(this.processForm).then(response => {
              this.msgSuccess("修改成功");
              this.openProcess = false;
              this.chosenTechProcessNo = this.processForm.techProcessNo;
              this.form.techProcessNo = this.processForm.techProcessNo;

              this.getTPList();
            });
          } else {
            addTechProcess(this.processForm).then(response => {
              this.msgSuccess("新增成功");
              this.openProcess = false;
              this.chosenTechProcessNo = this.processForm.techProcessNo;
              this.form.techProcessNo = this.processForm.techProcessNo;
              this.getTPList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleTPDelete(row) {
      const techProcessNos = row.techProcessNo || this.p_ids;
      this.$confirm(
        '是否确认删除工艺流程管理编号为"' + techProcessNos + '"的数据项?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(function() {
          return delTechProcess(techProcessNos);
        })
        .then(() => {
          this.getTPList();
          this.msgSuccess("删除成功");
        });
    },
    /** 导出按钮操作 */
    handleTPExport() {
      const p_queryParams = this.p_queryParams;
      this.$confirm("是否确认导出所有工艺流程管理数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          return exportTechProcess(p_queryParams);
        })
        .then(response => {
          this.download(response.msg);
        });
    },
    //------------------------------------------------------------------------------------------------------
    // 工艺流程管理方法
    /** 查询工艺流程管理列表 */
    getList() {
      this.loading = true;
      listTechProcedure(this.queryParams).then(response => {
        this.techProcedureList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        rowId: null,
        techProcedureNo: null,
        techProcedureName: null,
        techProcessNo: this.chosenTechProcessNo,
        currentProcessNo: null,
        nextProcessNo: null,
        deleteFlag: "Y",
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.techProcedureNo);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加工艺流程管理";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const techProcedureNo = row.techProcedureNo || this.ids;
      getTechProcedure(techProcedureNo).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改工艺流程管理";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.rowId != null) {
            updateTechProcedure(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addTechProcedure(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const techProcedureNos = row.techProcedureNo || this.ids;
      this.$confirm(
        '是否确认删除工艺流程管理编号为"' + techProcedureNos + '"的数据项?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(function() {
          return delTechProcedure(techProcedureNos);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        });
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm("是否确认导出所有工艺流程管理数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          return exportTechProcedure(queryParams);
        })
        .then(response => {
          this.download(response.msg);
        });
    }
  }
};
</script>
